<template>
  <div class="notice-wapper">
    <div class="tool">
      <div class="add-wapper" style="float: left">
        <span v-if="createSystemNotice" @click.stop="addNotice"><i class="el-icon-plus el-icon--right"></i><span class="creat-text">{{$t('configLazyLoad.noticeConfig.createNotice')}}</span></span>
      </div>
      <div class="pag-wapper" style="float: right">
        <pagination
          :small="true"
          :currentPage="currentPage"
          :count="count1"
          @turnPage="trunPages"
          :totalPage="Math.ceil(count/10)"
        >
        </pagination>
      </div>
    </div>
    <div class="table-wapper">
      <el-table
        :data="noticeList"
        size="mini"
        highlight-current-row
        stripe
        style="width: 100%">
        <el-table-column
          :label="$t('configLazyLoad.noticeConfig.noticeTitle')"
          show-overflow-tooltip>
          <template scope="scope"
          >
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.noticeConfig.noticeLevel')"
          width="60">
          <template scope="scope">
            {{ scope.row.level === 'common' ? $t('business.priority1'):$t('configLazyLoad.noticeConfig.important') }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.qualityCheck.lastOperator')"
          show-overflow-tooltip>
          <template scope="scope">
            <agent
              :id="scope.row.updateAgent"
              isNum >
            </agent>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.noticeConfig.lastOperationTime')">
          <template scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
          <el-table-column
            :label="$t('workbench.publishTime')">
            <template scope="scope">
              {{ scope.row.publishTime }}
            </template>
          </el-table-column>
        <el-table-column
          :label="$t('configLazyLoad.noticeConfig.publishStatus')"
          width="80">
          <template scope="scope">
            {{ scope.row.status === 'disable' ? $t('configLazyLoad.noticeConfig.errorTip5'): scope.row.status === 'save' ? $t('qualityCheck.saved') : $t('configLazyLoad.noticeConfig.published') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('public.operate')"
                         width="100"
                          >
          <template scope="scope">
            <el-button
              v-if="editSystemNotice"
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)">
              {{$t('public.edit2')}}
            </el-button>
            <el-button
              size="small"
              type="text"
              @click="handleShowNot(scope.$index, scope.row)">{{$t('business.view')}}
            </el-button>
            <el-button
              v-if="deleteSystemNotice"
              size="small"
              type="text"
              class="del"
              @click="handleDel(scope.$index, scope.row)">{{$t('public.delete')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  import Pagination from '@/components/public-modules/card/Pagination'
  import { deepClone, isHasMenu } from '@/utils/m7Utils.js'
  export default {
    name: 'noticeTab',
    data () {
      return {
        currentPage: '',
        noticeList: [],
        count1: 0
      }
    },
    props: {
      tableData: Array,
      count: Number,
      currPage: Number
    },
    components: {
      Pagination,
      Agent
    },
    watch: {
      currPage () {
        this.currentPage = this.currPage
      },
      tableData () {
        this.count1 = this.count
        this.noticeList = deepClone(this.tableData)
      }
    },
    methods: {
      handleShowNot (index, row) {
        this.$emit('showNotice', row)
      },
      trunPages (page) {
        this.$emit('trunPages', page)
      },
      addNotice () {
        this.$emit('addNotice')
      },
      handleEdit (index, row) {
        this.$emit('edit', row)
      },
      handleDel (index, row) {
        this.$emit('del', row)
      }
    },
    beforeMount () {
      this.editSystemNotice = isHasMenu('edit_system_notice', this.$store.state.session.user)
      this.deleteSystemNotice = isHasMenu('delete_system_notice', this.$store.state.session.user)
      this.createSystemNotice = isHasMenu('create_system_notice', this.$store.state.session.user)
      this.currentPage = this.currPage
      this.count1 = this.count
      this.noticeList = deepClone(this.tableData)
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .del
    color: $c-pink !important
    margin-left 0px
  .wapper
    display flex
    flex-direction column
  .tool
    border 1px solid #e7e7eb
    border-bottom 0
    padding  8px 0px
    /*display flex*/
    justify-content space-between
  .el-icon-plus
    color $c-main
  .add-wapper
    line-height 28px
    cursor pointer
    span
      margin-left 5px
  .stop
    color $c-pink
  .notice-wapper
    padding-left 0px
    overflow-y hidden
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0px;
    padding-right: 10px;
    padding-left: 16px;
    /* height: calc(100vh - 95px); */
    overflow-y: auto;
    font-size: 12px;
</style>
